<!--全屏切换-->

<template>
  <div class="full-screen-toggle-comp w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <i :class="'iconfont ' + icon"
       :style="{
         fontSize: this.$parent.$parent.layoutItem.layoutItemConfigData.width + 'px',
         color: this.component.compConfigData.iconColor,
         // textShadow: '0 0 15px ' + this.component.compConfigData.iconColor
       }" @click="toggleFullScreen($event)"></i>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import './iconfont/iconfont.css'

  const _this = {
    name: 'FullScreenToggleComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        iconColor: '#eeeeee'

      }, PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {
        icon: 'icon-comp-fullscreen-expand'
      }
    },
    mounted() {
      this.init();

      let eventList = ["fullscreenchange", "MSFullscreenChange", "mozfullscreenchange", "webkitfullscreenchange"]
      eventList.forEach(eventName => {
        window.addEventListener(eventName, () => {
          if (this.icon == 'icon-comp-fullscreen-expand') {
            this.icon = 'icon-comp-fullscreen-shrink'
          } else if (this.icon == 'icon-comp-fullscreen-shrink') {
            this.icon = 'icon-comp-fullscreen-expand'
          }
        })
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      noFullscreenSupport () {
        console.warn('Your browser does not support the Fullscreen API.');
      },

      enterFullscreen (el) {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
          el.webkitRequestFullscreen();
        } else {
          this.noFullscreenSupport();
        }
      },

      exitFullscreen () {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else {
          this.noFullscreenSupport();
        }
      },

      toggleFullScreen (e) {
        e.preventDefault();
        if ((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
          this.exitFullscreen();
        } else {
          this.enterFullscreen(document.documentElement);
        }
      }
    },
    computed: {}
  };

  export default _this
</script>

<style lang="less" scoped>
  .full-screen-toggle-comp{
    i {
      cursor: pointer;

    }
  }
</style>
